﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主机维护</title>
<link rel="stylesheet" href="${request.contextPath}/css/bootstrap.min.css">
<script src="${request.contextPath}/js/jquery/jquery.min.js"></script>
<script src="${request.contextPath}/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script src="${request.contextPath}/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
<style>
input.error {
	border: 1px solid #e6594e;
}
</style>
</head>
<body>
	<div class="container">

		<form id="addHostForm">
			<br />
			<div class="form-group">
				<label for="hostname">主机名称：</label> <input type="text"
					class="form-control" id="hostname" name="hostname"
					placeholder="输入主机名称">
			</div>
			<div class="form-group">
				<label for="hostaddr">主机IP：</label> <input type="text"
					class="form-control" id="hostaddr" name="hostaddr"
					placeholder="输入主机IP">
			</div>
			<div class="form-group">
				<label for="hostaddr">SSH端口号：</label> <input type="text"
					class="form-control" id="hostport" name="hostport" value="22"
					placeholder="输入SSH端口号">
			</div>
			<div class="form-group">
				<label for="hostusername">主机用户名：</label> <input type="text"
					class="form-control" id="hostusername" name="hostusername"
					placeholder="主机用户名">
			</div>

			<div class="form-group">
				<label for="hostpassword">密钥文件（填写此项则用户密码不生效）：</label>
					<input type="file" class="form-control" id="hostkeyfile" name="hostpkeyfile" placeholder="密钥文件"><input type="button" value="上传" onclick="submit2();" />
				   <input type="input" class="form-control" id="hostkeyfilepath" name="hostpkeyfilepath"  readonly="readonly"  >
			</div>
			<div class="form-group">
				<label for="hostpassword">用户密码（若密钥有密码则填写在此处）</label>
				<input type="password" class="form-control" id="hostpassword" name="hostpassword"   placeholder="主机密码">
			</div>
			<div class="form-group">
				<label for="eznmonport">监控端口号：</label> <input type="text"
					class="form-control" id="eznmonport" name="eznmonport" value="9999"
					placeholder="输入EasyNmon端口号">
			</div>
			<div class="form-group">
				<label>系统类型：（默认nmon支持CentOS6~7等，Ubuntu和SUSE等版本需要选择）</label> <select id="ostype" name="ostype"  class="form-control" >
					<option value="">--请选择--</option>
				</select>
			</div>
			<div class="form-group">
				<label for="hosteremark">主机说明：</label> <input type="text"
					class="form-control" id="hostremark" name="hostremark"
					placeholder="主机说明">
			</div>
			<div class="form-group">
				<button type="button" id="saveBtn" class="btn btn-success">提交</button>
				<button type="button" id="cancelBtn" class="btn btn-default">取消</button>
			</div>
		</form>
	</div>

	<script>
		function submit2(){
			var type = "file";          //后台接收时需要的参数名称，自定义即可
			var id = "hostkeyfile";            //即input的id，用来寻找值
			var formData = new FormData();
			formData.append(type, $("#"+id)[0].files[0]);    //生成一对表单属性
			$.ajax({
				type: "POST",           //因为是传输文件，所以必须是post
				url: '/upload',         //对应的后台处理类的地址
				data: formData,
				processData: false,
				contentType: false,
				success: function (data) {
					var msg=data.split("|")
					//alert(msg);
					alert(msg[0]);
					if(msg.length>1){
						$("#hostkeyfilepath").val(msg[1]);
					}
				}
			});
		}
		function getContextPath() {
			return "${request.contextPath}";
		}
		var contextPath = getContextPath();
		var addHost = function() {
			if (!check().form()) {
				return;
			}
			$.ajax({
				type : "GET",
				dataType : "json",
				url : contextPath + "/host/add",
				data : {
					"name" : $("#hostname").val(),
					"addr" : $("#hostaddr").val(),
					"port" : $("#hostport").val(),
					"username" : $("#hostusername").val(),
					"password" : $("#hostpassword").val(),
					"remark" : $("#hostremark").val(),
					"eznmonport" : $("#eznmonport").val(),
					"ostype" : $("#ostype").val(),
					"keyfilepath" : $("#hostkeyfilepath").val()
				},
				success : function(msg) {
					//alert(msg);
					$('#cancelBtn').click();
				}
			});
		}

		$('#saveBtn').on('click', function() {
			checkip();
		});

		$('#cancelBtn').on('click', function() {
			var index = parent.layer.getFrameIndex(window.name);
			parent.getHostPageList();
			parent.layer.close(index);
		});

		//校验字段是否正确 
		function check() {
			/*返回一个validate对象，这个对象有一个form方法，返回的是是否通过验证*/
			return $("#addHostForm").validate({
				rules : {
					hostname : {
						required : true
					},
					hostaddr : {
						required : true
					},
					hostport : {
						required : true
					},
					hostusername:{
						required:true
					}
				},
				messages : {
					hostname : {
						required : ""
					},
					hostaddr : {
						required : ""
					},
					hostport : {
						required : ""
					},
					hostusername:{
						required:""
					}
				}
			});
		}
		function checkip() {
			$.ajax({
				type : "GET",
				dataType : "json",
				url : contextPath + "/validate/checkip",
				data : {
					"name" : $("#hostname").val(),
					"addr" : $("#hostaddr").val(),
					"port" : $("#hostport").val(),
					"username" : $("#hostusername").val(),
					"password" : $("#hostpassword").val(),
					"remark" : $("#hostremark").val(),
					"ostype" : $("#ostype").val(),
					"keyfilepath" : $("#hostkeyfilepath").val()
				},
				success : function(msg) {
					if (msg.message == 'false') {
						v_chkip = false;
						alert('IP重复！');

					} else {
						addHost();
					}
				}
			});
		}
		function getOSList() {
			$.ajax({
				type : "GET",
				dataType : "json",
				url : contextPath + "/easynmon/getostype",
				data : {},
				success : function(msg) {
					$('#ostype').html('');
					var options = '';
					options += '<option value="">--请选择--</option>';
					var pair = msg.message.split(",");
					for (var i = 0; i < pair.length; i++) {
						options += '<option value="' + pair[i] + '">' + pair[i]
								+ '</option>';
					}
					$('#ostype').append(options);
				}
			});
		}
		 getOSList();
	</script>
</body>
</html>